<template>
	<div class="per-order" @click="rightClick">
		<div class="order-top">
			<h5>电子发票</h5>
			<hr />
		</div>
		<div class="order-middle">
			<div class="order-middle-part">
				<span>订单编号：</span>
				<input type="text" />
			</div>
			<div class="order-middle-part">
				<span>联系人：</span>
				<input type="text" />
			</div>
			<div class="order-middle-part">
				<span>手机号码：</span>
				<input type="text" maxlength="11"/>
			</div>
			<div class="order-middle-part">
				<span>发票类型：</span>
				<input type="text" placeholder="全部" readonly @click="changeType($event)" v-model="typeValue"/>
				<ul class="type-ul" v-if="isType">
					<li @click="typeClick($event)">全部</li>
					<li @click="typeClick($event)">电子发票</li>
					<li @click="typeClick($event)">普票</li>
				</ul>
			</div>
			<div class="order-middle-part">
				<span class="order-start-span">开始时间：</span>
				<div class="order-start-div">
					<Calendar @calDate="startDate"/>
				</div>
			</div>
			<div class="order-middle-part">
				<span class="order-end-span">结束时间：</span>
				<div class="order-end-div">
					<Calendar @calDate="endDate"/>
				</div>
			</div>
			<div class="order-middle-part">
				<span>支付状态：</span>
				<input type="text" readonly placeholder="全部" @click="changeState($event)" v-model="stateValue"/>
				<ul class="type-ul" v-if="isState">
					<li @click="stateClick($event)">全部</li>
					<li @click="stateClick($event)">未付款</li>
					<li @click="stateClick($event)">已付款</li>
				</ul>
			</div>
			<div class="order-middle-part">
				<a href="javascript:;" @click="inquire">查询</a>
				<a href="javascript:;">导出</a>
			</div>
		</div>
		<div class="order-bottom">
			<div class="order-bottom-title">
				<span class="order-select"><i @click="clickAll" :class="{'selectAll':isSelect}"></i>全选</span>
				<span class="order-reference">订单编号</span>
				<span class="order-company">公司名称</span>
				<span class="order-user">联系人</span>
				<span class="order-tele">手机号码</span>
				<span class="order-timer">订单日期</span>
				<span class="order-timerend">有效期至</span>
				<span class="order-type">发票类别</span>
				<span class="order-state">支付状态</span>
				<span class="order-operation">操作</span>
			</div>
			<div class="order-bottom-content" v-for="(item,index) in xunhuan" :key="index">
				<span href="javascript:;" class="order-select"><i :class="{'isSelect':isSelect}" @click="selectOne($event)"></i></span>
				<span class="order-reference">123456789</span>
				<span class="order-company">北京计算未来科技有限公司</span>
				<span class="order-user">欧阳夏丹</span>
				<span class="order-tele">13112341234</span>
				<span class="order-timer">2017-12-10</span>
				<span class="order-timerend">2018-12-10</span>
				<a href="javascript;;" class="order-type" v-fptype>电子发票</a>
				<span class="order-state">已支付</span>
				<span class="order-operation">
					<router-link :to="{name:'orderCheck'}">查看订单</router-link>
					<router-link :to="{name:'buyIndex'}">续费</router-link>
				</span>
			</div>
			<a href="javascript:;" class="deleteAll" @click="clickDelete" >删除</a>
		</div>
		<!--删除弹框-->
		<DeleteTitle v-if="isPop" :contentData="popContent" @keepNoteYes="keepNoteYes" @keepNoteNo='keepNoteNo'/>
		<!--开始时间大于结束时间-->
		<DateError v-if="timePan"></DateError>
	</div>
</template>

<script>
	import $ from 'jquery'
    // 引入日历子组件
    import Calendar from '@/components/public/calendar'
    // 引入弹出框(删除)
    import DeleteTitle from '@/components/public/keepNote'
    // 开始时间大于结束时间弹框
    import DateError from '@/components/public/dateError' 
	export default {
		components: {
			Calendar,
			DeleteTitle,
			DateError
		},
		// 给发票类型加一个自定义指令
		directives: {
			fptype: {
				inserted: function (el) {
				    if (el.innerHTML === '电子发票') {
						el.setAttribute('class','dian-zi')
						el.setAttribute('href','#/personIndex/personInfo/orderMana/eleInvoice')
					} else {
						el.setAttribute('class','order-type')
						el.setAttribute('href','#/personIndex/personInfo/orderMana/perOrder')
					}
				}
			}
		},
		data () {
			return {
				xunhuan: 3,
				isType: false, // 发票类型弹框是否显示
				typeValue: '', // 发票类型值
				ispp: true, // 判断是普票还是电子发票
				isState: false, // 支付状态弹框是否显示
				stateValue: '', // 支付类型值
				isSelect: false, // 文件名是否选上
	  			isPop: false, // 删除弹框是否显示
	  			popContent: '删除后将无法找回,是否删除',
	  			oneIndex: null, // 单个删除，给弹出框传值
	  			endValue: null, // 结束时间
	  			startValue: null, // 开始时间
	  			timePan: false, // 是否弹出时间弹出框
	  			isEmpty: [false,false] // 是否清空时间
			}
		},
		methods: {
			// 整个组件的点击事件
			rightClick () {
				this.isType = false
				this.isState = false
			},
			// 发票类型选择事件
			changeType (e) {
				var that = this
				var eve = e || window.event
				if(eve.stopPropagation){
					eve.stopPropagation();
				}else{
					eve.cancelBubble = true ;
				}
				that.isType = !that.isType
				that.isState = false
			},
			// 选择发票
			typeClick (e) {
				var that = this
				var eve = e || window.event
				that.typeValue = eve.target.innerHTML
				that.isType = false
			},
			// 支付状态点击事件
			changeState (e) {
				var that = this
				var eve = e || window.event
				if(eve.stopPropagation){
					eve.stopPropagation();
				}else{
					eve.cancelBubble = true ;
				}
				that.isState = !that.isState
				that.isType = false
			},
			// 选择支付状态
			stateClick (e) {
				var that = this
				var eve = e || window.event
				that.stateValue = eve.target.innerHTML
				that.isState = false
			},
			//获取开始事件
	  		startDate (val,event) {
	  			var  that = this
	  		    that.startValue = val
	  		    var start = new Date(val).getTime()
	  		    var end = new Date(that.endValue).getTime()
	  		    if (end) {
	  		    	if (start > end) {
	  		    		that.timePan = true
	  		    		that.isEmpty[0] = true
	  		    		setTimeout (function () {
		  		    		that.timePan = false
		  		    	},3000)
	  		    	} else {
	  		    		that.timePan = false
	  		    		that.isEmpty[0] = false
	  		    	}
	  		    } else {
	  		    	that.isEmpty[0] = false
	  		    }
	  		},
	  		// 获取结束时间
	  		endDate (val,event) {
	  		    var  that = this
	  		    that.endValue = val
	  		    var start = new Date(that.startValue).getTime()
	  		    var end = new Date(val).getTime()
		    	if (start > end) {
	  		    	that.timePan = true
	  		    	that.isEmpty[1] = true
	  		    	setTimeout (function () {
	  		    		that.timePan = false
	  		    	},2000)
	  		    } else {
	  		    	that.timePan = false
	  		    	that.isEmpty[1] = false
	  		    }
	  		},
			// 全选事件
			clickAll () {
				var that = this
  				that.isSelect = !that.isSelect
			},
			// 单个选中事件
			selectOne (e) {
				var that = this
				var eve = e || window.event
				var evet = eve.target
	  			that.allSelect = false
	  			if (evet.className) {
	  				evet.removeAttribute('class')
	  			} else {
	  				evet.setAttribute('class','isSelect')
	  			}
			},
			// 查询
			inquire () {
				var that = this 
				var start = that.startValue
				var end = that.endValue
	  			if (start === null || end === null || end >= start) {
	  				that.timePan = false
	  			} else {
	  				that.timePan = true
	  				setTimeout(function () {
	  					that.timePan = false
	  				},3000)
	  			}
			},
			// 删除
	  		clickDelete (event) {
	  			this.isPop = true
	  		},
	  		// 是否删除 ， 是
	  		keepNoteYes () {
	  			this.isPop = false
	  		},
	  		// 是否删除 ， 否
	  		keepNoteNo () {
	  			this.isPop = false
	  		},
		}
	}
</script>

<style scoped>
    @import '../../../../../../static/personal/perOrder.css';
</style>